<template>
	<el-container>
		<el-aside width="250px" v-loading="menuloading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="group" class="menu" node-key="id" :data="menuList" :props="menuProps" draggable highlight-current :expand-on-click-node="false" check-strictly  :filter-node-method="menuFilterNode" @node-click="menuClick"  default-expand-all >
						<template #default="{node, data}">
							<span class="custom-tree-node">
								<span class="label">
									{{ node.label }}
								</span>
							</span>
						</template>
					</el-tree>
				</el-main>
				
			</el-container>
		</el-aside>
		<el-container>
			<el-main class="nopadding" style="padding:20px;" ref="main">
				<detail ref="save" :menu="menuList"></detail>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import detail from './detail'
	export default {
		name: "/systemSetting/user",
		components: {
			detail
		},
		data(){
			return {
				menuloading: false,
				menuList: [],
				menuProps: {
					label: (data)=>{
						return data.label
					}
				},
				menuFilterText: ""
			}
		},
		watch: {
			menuFilterText(val) {
				this.$refs.group.filter(val);
			}
		},
		mounted() {
			this.getMenu();
		},
		methods: {
			//加载树数据
			async getMenu(){
				this.menuloading = true
				var res = await this.$API.auth.deptTreeSelect.get();
				this.menuList = this.filterDisabledDept(JSON.parse(JSON.stringify(res.data)))
				this.menuloading = false
				
			},
			// 过滤禁用的部门
			filterDisabledDept(deptList) {
				return deptList.filter(dept => {
					if (dept.disabled) {
						return false
					}
					if (dept.children && dept.children.length) {
						dept.children = this.filterDisabledDept(dept.children)
					}
					return true
				})
			},
			//树点击
			menuClick(data, node){
				this.$refs.save.setData(data)
			},
			//树过滤
			menuFilterNode(value, data){
				if (!value) return true;
				var targetText = data.label;
				return targetText.indexOf(value) !== -1;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.menu:deep(.el-tree-node__label) {display: flex;flex: 1;height:100%;}
	.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;height:100%;padding-right:24px;}
	.custom-tree-node .label {display: flex;align-items: center;;height: 100%;}
	.custom-tree-node .label .el-tag {margin-left: 5px;}
	.custom-tree-node .do {display: none;}
	.custom-tree-node .do i {margin-left:5px;color: #999;}
	.custom-tree-node .do i:hover {color: #333;}

	.custom-tree-node:hover .do {display: inline-block;}
	.tree_aside{
		width: 300px;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		overflow: auto;
		padding-bottom: 58px;
	}
	.tree_footer {
		width: 100%;
		height: 50px;
		background: #fff;
		z-index: 9;
		border-right: 1px solid #e4e7ed;
	}

</style>
